<template>
    <div>
        <div class="goodslist-01" v-if="!chooseHero">
            <div class="top-header border-bottom ">
                <div class="top-back">
                    <a href="javascript:history.go(-1)">返回</a>
                </div>
                <h2 class="f36">
                    王者荣耀代练
                </h2>
            </div>
            <div class="mbpub-main">
                <div class="mbpub-list bg-fff px-30 border-bottom">
                    <div class="mbpub-name f32 color-000 fl">角色名</div>
                    <div class="mbpub-texl fr"><input class="pub-input py-30 f32 color-000" name="" type="text"
                                                      placeholder="请输入您的角色名" maxlength="30" v-model.trim="name"></div>
                </div>
                <div class="mbpub-list bg-fff px-30 border-bottom">
                    <div class="mbpub-name f32 color-000 fl">登录帐号</div>
                    <div class="mbpub-texl fr"><input class="pub-input py-30 f32 color-000" name="" type="text"
                                                      placeholder="请输入您的帐号" maxlength="30" v-model.trim="account"></div>
                </div>
                <div class="mbpub-list bg-fff px-30 border-bottom">
                    <div class="mbpub-name f32 color-000 fl">帐号密码</div>
                    <div class="mbpub-texl fr"><input class="pub-input py-30 f32 color-000" name="" type="text"
                                                      placeholder="请输入您的帐号密码" maxlength="30" v-model.trim="pwd"></div>
                </div>
                <div class="mbpub-list bg-fff px-30 border-bottom" @click="openShade(1)">
                    <div class="mbpub-name f32 color-000 fl">物理铭文</div>
                    <div class="mbpub-texl fr"><span class="f32 color-000 text-right" v-text="physicsText"></span></div>
                </div>
                <div class="mbpub-list bg-fff px-30 border-bottom" @click="openShade(2)">
                    <div class="mbpub-name f32 color-000 fl">法术铭文</div>
                    <div class="mbpub-texl fr"><span class="f32 color-000 text-right" v-text="magicText"></span></div>
                </div>
                <div class="mbpub-list bg-fff px-30 border-bottom" @click="openShade(3)">
                    <div class="mbpub-name f32 color-000 fl">强势英雄</div>
                    <div class="mbpub-texl fr"><span class="f32 color-000 text-right">
                        <em class="dlmbimg" v-for="item in hero"><img :src="item.img"></em>
                        <!--<em class="dlmbimg"><img src="~images/herlist-img.png"></em>-->
                        <!--<em class="dlmbimg"><img src="~images/herlist-img.png"></em>-->
                        <!--<em class="dlmbimg"><img src="~images/herlist-img.png"></em>-->
                        <!--<em class="dlmbimg"><img src="~images/herlist-img.png"></em>-->
                        <!--<em class="dlmbimg"><img src="~images/herlist-img.png"></em>-->
                        <!--<em class="">...</em>-->
                    </span></div>
                </div>
                <div class="mbpub-list bg-fff px-30 border-bottom" @click="openShade(4)">
                    <div class="mbpub-name f32 color-000 fl">平台区服</div>
                    <div class="mbpub-texl fr"><span class="f32 color-000 text-right" v-text="areaText"></span></div>
                </div>
                <div class="mbpub-list bg-fff px-30 border-bottom">
                    <div class="mbpub-name f32 color-000 fl">具体区服</div>
                    <div class="mbpub-texl fr"><input class="pub-input py-30 f32 color-000" name="" type="text"
                                                      placeholder="请输入具体区服" maxlength="30" v-model.trim="server"></div>
                </div>
                <div class="mbpub-btn bg-fff p-30 fixed-bottom">
                    <a class="btn color-fff text-center bg-f54 f36" @click="next">确认下单</a>
                </div>
            </div>

            <!--弹窗-->
            <transition name="bottom-fade">
                <div class="mbpub-pop bg-fff fixed-bottom" v-show="shade">
                    <div class="mbpop-titl text-center f36 color-000"><a class="close" @click="shade=false"></a>
                        {{nameMin}}
                    </div>
                    <div class="mbpop-conn">
                        <div v-for="item in sicslList" @click="sicslClick(item)"
                             class="mbpop-list text-center border-top f30 color-333">{{item.grade}}
                        </div>
                        <!--<div class="mbpop-list text-center border-top f30 color-333">100级-119级</div>-->
                        <!--<div class="mbpop-list text-center border-top f30 color-333">120级-139级</div>-->
                        <!--<div class="mbpop-list text-center border-top f30 color-333">140级-149级</div>-->
                        <!--<div class="mbpop-list text-center border-top f30 color-333">150级</div>-->
                    </div>
                </div>
            </transition>
            <div class="dialog_cover" v-show="shade" @click="offShade"></div>
        </div>

        <hero v-if="chooseHero" @heroList="close" :heroId="hero"></hero>
    </div>
</template>

<script>
  import config from './config'
  import hero from './ChooseHero.vue'
  export default {
    name: '',
    data () {
      return {
        shade: false,
        chooseHero: false,
        name: '',
        account: '',
        pwd: '',
        physicsText: '请选择',
        physicsNum: '',
        magicText: '请选择',
        magicNum: '',
        heroText: '请选择',
        areaText: '请选择',
        hero: null,
        server: '',
        nameMin: "",
        sicslList: [],
        terrace: [
          {grade: "安卓手Q", system: 'androidQQ'}, {grade: "安卓微信", system: 'androidWX'}, {
            grade: "苹果手Q", system: 'iosQQ'
          }, {grade: "苹果微信", system: 'iosWX'},
        ],
        params: {
          dwStart: this.$route.params.dwStart,
          dwEnd: this.$route.params.dwEnd,
          dwQ: this.$route.params.dwQ,
          dwZ: this.$route.params.dwZ
        }
      }
    },
    components: {
      hero
    },
    mounted(){
      console.log(config)
    },
    methods: {
      sicslClick(item){
        //选择显示文字
        if (this.nameMin == "物理铭文") {
          this.physicsText = item.grade
          this.physicsNum = item.status
        } else if (this.nameMin == "法术铭文") {
          this.magicText = item.grade
          this.magicNum = item.status
        } else if (this.nameMin == "平台区服") {
          this.areaText = item.grade
          this.params.system = item.system
        }
        this.shade = false
      },
      openShade(s){
        this.shade = true;
        if (s == 1) {
          this.sicslList = config.physicslList;
          this.nameMin = "物理铭文"
        } else if (s == 2) {
          this.sicslList = config.spellList;
          this.nameMin = "法术铭文"
        } else if (s == 4) {
          this.sicslList = this.terrace;
          this.nameMin = "平台区服"
        }
        if (s == 3) {
          this.shade = false;
          this.chooseHero = true;
        }
      },
      offShade(){
        this.shade = false;
      },
      close(s){
        this.hero = s;
        let heroName = [], heroType = []
        this.hero.forEach(item => {
          heroName.push(item.name)
          let arr = []
          if (item.attribute.length > 2) {
            arr = item.attribute.split(',')
            heroType.push(...arr)
          } else {
            heroType.push(item.attribute)
          }
        })
        this.params.heroName = heroName.join(',')
        this.params.heroType = [...new Set(heroType)].join(',')
        //console.log(this.hero)
      },
      next(){
        if (!this.name) {
          this.$messagebox.alert('请先输入角色名！');
          return false
        } else if (!this.account) {
          this.$messagebox.alert('请先输入帐号！');
          return false
        } else if (!this.pwd) {
          this.$messagebox.alert('请先输入密码！');
          return false
        }
        if (this.physicsNum && !this.magicNum) {
          this.params.fwlx = '物理'
          this.params.fwdj = this.physicsNum
        } else if (!this.physicsNum && this.magicNum) {
          this.params.fwlx = '法术'
          this.params.fwdj = this.magicNum
        } else if (this.physicsNum && this.magicNum) {
          this.params.fwlx = '物理,法术'
          this.params.fwdj = `${this.physicsNum},${this.magicNum}`
        }
        this.params.loginPassword = this.pwd
        this.params.gameAccount = this.account
        this.params.nickName = this.name
        this.params.serverName = this.server
        this.$http.post(this.$CONSTANTS.APIdl+'levelingmainorder/createDlbOrder',this.params).then(res=>{
          if(res.body.responseStatus.code=='00'){
            location.href=JSON.parse(res.body.result).PayUrl
          }else{
            this.$messagebox.alert(res.body.responseStatus.message)
          }
        })
      }
    }
  }
</script>

<style src="css/dlAll/dl-cxy.css" ></style>
<style scoped>
    .bottom-fade-enter-active {
        transition: all .3s ease;
    }

    .bottom-fade-leave-active {
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .bottom-fade-enter, .bottom-fade-leave-active {
        transform: translateY(100px);
        opacity: 0;
    }

    .mbpub-pop {
        max-height: 5.76rem;
        overflow: auto;
    }
</style>
